<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">

</head>
<body>

<div class="layui-container">
    <blockquote class="layui-elem-quote layui-text">
        员工工资数据表格：
    </blockquote>

    <table id="deml" lay-filter="test"></table>

</div>
<script src="layui-v2.5.7/layui/layui.all.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="import">导入</button>
    </div>
</script>
<script>
    layui.use(['table','layer','form'], function() {
        const table = layui.table;
        const layer = layui.layer;
        const $ = layui.$;


        const tableIns = table.render({
            elem: '#deml'
            , url: '/ssc/all/'
            , cellMinWidth: 80
            , defaultToolbar: ['filter', 'print', 'exports']
            , toolbar: '#toolbarDemo'
            , page: true
            // , limit: 5
            , cols: [[
                {field: 'employeename', title: '员工姓名', fixed: 'left'}
                , {field: 'employeeID', title: '员工号',sort:true}
                , {field: 'employeeSalary', title: '员工基本工资'}
                , {field: 'employeeExtraSalary', title: '员工额外工资'}
                , {field: 'employeeTotalSalary', title: '员工总工资', sort: true}
                , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
        });


        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            const data = obj.data; //获得当前行数据
            const layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            const tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看

                layer.open({
                    type: 2,
                    content: 'salaryDetail.jsp',
                    area: ['700px', '500px'],
                    success: function (layero, index) {
                        console.log(layero, index);
                        // 数据绑定
                        const body = layer.getChildFrame('body', index);
                        body.find('#employeename').val(data.employeename);
                        body.find('#employeeID').val(data.employeeID);
                        body.find('#employeeSalary').val(data.employeeSalary);
                        body.find('#employeeExtraSalary').val(data.employeeExtraSalary);
                        body.find('#employeeTotalSalary').val(data.employeeTotalSalary);
                    }
                });


            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    // 发起 AJAX 请求
                    $.ajax({
                        url: '/ssc/del/',
                        type: 'POST',
                        data: {employeeID: data.employeeID},
                        success: function (res) {
                            console.log(res);
                            console.log(res.code);
                            console.log(res.code === 200);
                            if (res.code === 200) {
                                tableIns.reload();
                                layer.msg('删除成功');
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function (error) {
                            layer.msg(error);
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    content: 'editSalary.jsp',
                    area: ['700px', '400px'],
                    title: false,
                    btn: ['确定', "取消"],
                    yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'user-add-save'
                            , submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段

                            $.ajax({
                                url: '/ssc/update/',
                                type: 'POST',
                                data: JSON.stringify(field),
                                success: function (res) {
                                    if (res.code === 200) {
                                        tableIns.reload();
                                        layer.close(index);
                                        layer.msg('修改成功');
                                    } else {
                                        layer.msg('修改失败');
                                    }
                                },
                                error: function (error) {
                                    layer.msg('修改失败');
                                }
                            });
                        });

                        submit.trigger('click');
                    },
                    success: function (layero, index) {
                        render_form(layero, index, data)
                    }
                });
            }


            function render_form(layero, index, data) {
                const body = layer.getChildFrame('body', index);
                body.find('#employeename').val(data.employeename);
                body.find('#employeeID').val(data.employeeID);
                body.find('#employeeSalary').val(data.employeeSalary);
                body.find('#employeeExtraSalary').val(data.employeeExtraSalary);
                body.find('#employeeTotalSalary').val(data.employeeTotalSalary);
            }
        });

        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        content: 'addSalary.jsp',
                        area: ['700px', '400px'],
                        title: false,
                        btn: ['确定', "取消"],
                        yes: function (index, layero) {
                            const iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'user-add-save'
                                , submit = layero.find('iframe').contents().find('#' + submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                const field = data.field; //获取提交的字段

                                $.ajax({
                                    url: '/ssc/add/',
                                    type: 'POST',
                                    data: JSON.stringify(field),
                                    success: function (res) {
                                        if (res.code === 200) {
                                            tableIns.reload();
                                            layer.close(index);
                                            layer.msg('添加成功');
                                        } else {
                                            layer.msg('添加失败');
                                        }
                                    },
                                    error: function (error) {
                                        layer.msg(error);
                                    }
                                });
                            });

                            submit.trigger('click');
                        }
                    });

                    break;
                case 'import':
                    layer.msg('导入');
                    break;
            }
        });

    });
</script>
</body>
</html>
